ページ速度最適化の実践手順：Core Web Vitals改善とパフォーマンス測定の要点

えーと、ページ速度の話。大事だとはわかってるんだけど、何から手をつければいいのか…。まずは、言葉の整理からかな。

とりあえず結論

結局、ユーザーが「快適」と感じるかどうかが全て。Googleが言うCore Web Vitalsも、そのための指標に過ぎない。速いサイトは、ユーザー体験が良くなって、結果的にSEO評価も上がりやすい、ということ。特に、最近はINPっていう新しい指標が出てきたから、そこも注意が必要。

他の記事があんまり触れてないこと

色々な解説記事はあるけど、だいたいツールの使い方か、個別の指標の話で終わってる気がする。でも、実際の問題はもっと複雑。例えば、マーケティング用のスクリプトを入れたらINPが悪化するとか。そういうトレードオフをどう判断するかが、実は一番難しい。

それと、海外の情報をそのまま持ってきてもダメなことがある。Googleの公式ドキュメントは基本だけど、日本のサイト、特にECサイトみたいに情報量が多いページだと、画像の扱い方とか、ちょっと違う工夫が必要だったりする。例えば、`WebP`みたいな次世代フォーマットがいいって言われてるけど、対応してないブラウザもまだあるから、``タグで元のJPEGも出し分ける、みたいな丁寧さが必要になる。

じゃあ、どうやってやるか [Core Web Vitals改善]

まず、自分のサイトの現状を知らないと始まらない。 Googleの「PageSpeed Insights」を使えば、誰でも無料で診断できる。 URLを入れて分析ボタンを押すだけ。これで、LCP、CLS、INPのスコアが出てくる。

診断結果を見たら、それぞれの指標を改善していく。

LCP (Largest Contentful Paint): 要は、一番大きなコンテンツが表示されるまでの時間。 2.5秒以内が理想。画像が原因なことが多いから、画像の圧縮とか、`WebP`みたいな軽いフォーマットを使うのが基本。あとは、サーバーの応答が遅いとどうしようもないので、良いホスティングサービスを選ぶことも大事。
INP (Interaction to Next Paint): 2024年3月からFIDに代わって導入された新しい指標。クリックとかキー入力に対する反応の速さのこと。 JavaScriptの処理が重いのが主な原因。不要なスクリプトを消したり、長い処理を分割したりする地道な作業が必要になる。
CLS (Cumulative Layout Shift): ページの読み込み中にレイアウトがガタガタ動く度合い。画像にサイズが指定されてなかったり、後から広告が読み込まれたりするのが原因。これは、画像や広告の表示領域をあらかじめ確保しておくことで防げる。

ツールの比較。どれを使えばいい？

ツールも色々あって迷う。無料のものから有料のものまで。とりあえずPageSpeed Insightsは基本として、他のツールも目的によって使い分ける感じかな。

ツール名	特徴	どんな時に使うか
PageSpeed Insights	うーん、Google純正だし、無料で使えるのが一番いい。 Core Web Vitalsの各指標を具体的に示してくれるし、改善案も出してくれるから、最初のとっかかりとしては最適。	まずはこれで全体像を把握するとき。手軽に診断したいならこれ一択。
Lighthouse	Chromeの開発者ツールに内蔵されてるやつ。 PageSpeed Insightsのエンジンみたいなもの。パフォーマンスだけじゃなくて、SEOとかアクセシビリティもチェックできる。	もっと技術的な詳細を知りたいとき。自分のPC環境で、特定の状況を再現しながらテストしたい場合。
GTmetrix	カナダのツール。 A～Fのランクで評価されるのが分かりやすいかも。無料版でもLCPとかCLSを計測してくれる。	海外からのアクセス速度を測りたいときとか、PageSpeed Insightsとは違う視点で評価を見たいときかな。
Web Vitals 拡張機能	Chromeの拡張機能。入れておけば、表示してるページのスコアをリアルタイムで確認できる。いちいちURLをコピペしなくていいから楽。	開発中とか、サイトを色々触りながら「あ、今のでスコア悪くなったな」みたいに、すぐに確認したいとき。すごく便利。